<template>
    <!-- 组件页面 -->
    <view class="toast_content_box" :animation="animationData">
        <view :class="'toast_content f bg-' + iconType">
            <!-- 默认提示图标 -->
            <view :class="'toast_content_img ' + iconType" v-if="!isUserImg"></view>
            <!-- 用户自定义提示图片 -->
            <view class="toast_content_myimg" v-if="isUserImg">
                <image class="toast_myimg" :src="imgPath"></image>
            </view>
            <!-- 提示内容 -->
            <view class="toast_content_text">
                {{ dataText }}
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            animationData: {},
            dataText: '',
            icon: '',
            showToast: false,
            isUserImg: false,
            imgPath: '',
            iconType: ''
        };
    },
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    props: {},
    methods: {
        //展示弹框
        showDialog(data) {
            var _this = this;
            var animation = uni.createAnimation({
                duration: 300,
                timingFunction: 'ease'
            });
            _this.animation = animation;
            animation
                .opacity(1)
                .translateY(0.26666666666666666 * uni.getSystemInfoSync().windowWidth)
                .step();
            _this.setData({
                animationData: animation.export(),
                showToast: true,
                dataText: data.content,
                //设置提示内容
                isUserImg: data.image ? true : false,
                //是否展示用户自定义图片
                imgPath: data.image,
                //用户自定义图片
                iconType: data.icon //设置提示图片类型
            });
            // 定时器关闭弹框
            setTimeout(
                function () {
                    animation
                        .translateY((-200 / 750) * uni.getSystemInfoSync().windowWidth)
                        .opacity(0)
                        .step();
                    this.setData({
                        animationData: animation.export()
                    });
                }.bind(this),
                3000
            );
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
